@creator-size: 26px;
@line-offset: 100px;
@color-red: #e5603b;
@color-gray: #999;

.editor-container {
  margin: 15px 0;
}

.event-editor {
  margin: 0 15px;
  border-radius: 2px;
  padding-bottom: 50px;
  background-color: rgb(245, 245, 245);
  .editor-header {
    padding: 5px 10px;
    margin-bottom: 10px;
    background-color: rgba(51, 153, 255, 0.09);
    .creator {
      height: 34px;
      padding: 6px 12px;
      display: inline-block;
      box-sizing: border-box;
    }
  }
}

.editor-body {
  position: relative;
  padding-left: 150px;
  &.has-relation {
    &:after {
      content: '';
      border-left: 1px rgba(0, 0, 0, .2) solid;
      position: absolute;
      top: 16px;
      bottom: 0;
      height: 100%;
      left: @line-offset;
    }
    &:before {
      content: '';
      border-top: 1px rgba(0, 0, 0, .2) solid;
      position: absolute;
      top: 16px;
      left: @line-offset + 1px;
      width: 50px;
    }
    .filter-relation {
      display: inline-block;
      padding: 5px 10px;
      border: 1px rgba(0, 0, 0, .2) solid;
      color: rgba(0, 0, 0, .2);
      position: absolute;
      z-index: 10;
      left: 82px;
      top: 50%;
      margin-top: -18px;
      background-color: #fff;
    }
  }
  .condition {
    position: relative;
    margin-bottom: 10px;
    .Select {
      margin-right: 10px;
    }
  }
  .creator {
    width: @creator-size;
    height: @creator-size;
    line-height: @creator-size - 3px;
    background: #F5F5F5;
    z-index: 1;
    cursor: pointer;
    color: rgba(0, 0, 0, .2);
    font-size: 24px;
    position: absolute;
    left: @line-offset - @creator-size / 2 + 1px;
    &:hover {
      color: rgba(0, 0, 0, .4);
      border-color: rgba(0, 0, 0, .4);
    }
  }
}

.table-private {
  & th {
    color: #888888;
  }

  & td {
    border: none;
  }

  & tr>:first-child {
    padding-left: 0px;
  }
}

.control-label {
  width: 7em !important;
  text-align: left !important;
}

.form-group {
  padding: 15px;
  &.horizontal li {
  padding-left: 9em;
  margin: 7.5px auto;
}
}

.custom-title {
  font-weight: bold;
  margin: 10px auto;
}

.vertical-box {
  margin: 15px auto;
}

.horizontal-box {
  margin: auto 15px;
}

.horizontal-line {
  height: 1px;
  background-color: #E2E2E2;
  margin: 10px auto;
}

.quote {
  font-size: 14px;
  color: #888888;
}

.text-red {
  line-height: 31px;
  color: @color-red;

  &:hover {
    color: darken(@color-red, 10%)
  }
}

.text-gray {
  line-height: 31px;
  color: @color-gray;

  &:hover {
    color: @color-gray;
  }
}

.cursor-disabled {
  cursor: not-allowed;
}

.notice-tips {
  z-index: 2000;
}

.event-settings {
  position: relative;
  .btn-user-property {
    position: absolute;
    top: 0;
    right: 15px;
  }
}

.user-property-modal-section {
  width: 710px;
  table {
    width: 100%;
    margin: 10px 0px 0 -8px;
    th,
    td {
      padding: 8px;
    }
    th {
      color: #888;
    }
  }
  .text-light {
    color: #888;
  }
  .input-text {
    font-size: 14px;
  }
  .default-nodata {
    color: #555;
  }
  .custom-property-table {
    position: relative;
    margin-bottom: 30px;
    &:after {
      content: ' ';
      position: absolute;
      bottom: -15px;
      left: 8px;
      right: 0px;
      border-bottom: 1px #e5e5e5 solid;
    }
  }
}

.virtual-event-editor {
  .form-group.horizontal li {
    margin: 7px 0;
  }
}